<template>
    <view class="banner_container">
        <swiper
            :class="'banner ' + (items.length == 0 ? 'hidden' : '')"
            :indicator-dots="items.length >= 2"
            :autoplay="items.length >= 2"
            :interval="interval"
            :duration="duration"
            indicator-color="#333"
            indicator-active-color="#fff"
            :circular="true"
        >
            <block v-for="(item, idx) in items" :key="idx">
                <swiper-item @tap="banner" :id="idx">
                    <image mode="widthFix" :data-info="item" @tap="link" :src="item.Fsrc" class="slide-image" />
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

<script>
// 轮播组件 
var util = require('../../utils/util.js');
export default {
    data() {
        return {
            items: [],

            //是否显示面板指示点
            indicatorDots: true,

            //是否自动轮播
            autoplay: true,

            //自动切换时间间隔
            interval: 3000,

            prop: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        //轮播图片列表
        con: {
            type: Object
        },
        //滑动动画时长
        duration: {
            type: Number,
            default: 500
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    /**
     * 组件的方法列表
     */
    //存放事件的地方
    methods: {
        ready: function () {
            var that = this;
            var prop = JSON.parse(that.con.prop);
            var con = that.con;
            that.prop = prop;
            that.items = con.ItemList;
			that.interval = interval: prop.autoplay * 1000;
            console.log(prop);
        },

        link: function (e) {
            var that = this;
            var data = e.currentTarget.dataset.info;
            var url = '';
            //微页面
            var that = this;
            var data = e.currentTarget.dataset.info;
            var url = '';
            if (util.isEmpty(data.Ftypeid)) {
                return;
            }
            //微页面
            if (data.Ftype == 1) {
                url = '/pages/wpage/wpage?Ftypeid=' + data.Ftypeid;
            } else if (data.Ftype == 2) {
                //商品分类
                url = '/pages/proList/proList?Ftypeid=' + data.Ftypeid;
            } else if (data.Ftype == 3) {
                //单商品
                url = '/pages/proDetail/proDetail?Ftype=3&Ftypeid=' + data.Ftypeid;
            } else if (data.Ftype == 4) {
                //闪购活动
                url = '/pages/proDetail/proDetail?Ftype=4&Ftypeid=' + data.Ftypeid;
            } else if (data.Ftype == 5) {
                //团购活动
                url = '/pages/proDetail/proDetail?Ftype=5&Ftypeid=' + data.Ftypeid;
            } else if (data.Ftype == 6) {
                //拼团活动
                url = '/pages/proDetail/proDetail?Ftype=6&Ftypeid=' + data.Ftypeid;
            }
            if (url == '') {
                return;
            }
            uni.navigateTo({
                url: url
            });
            uni.navigateTo({
                url: url
            });
        },

        banner() {
            console.log('占位：函数 banner 未声明');
        }
    },
    created: function () {}
};
</script>
<style>
@import './swiper.css';
</style>
